import React, { useEffect, useState } from 'react';
import { message, Space, Table } from 'antd';
import type { TableProps } from 'antd';
import '../../../css/oper_inspertion/tablejian.less'
import { useNavigate } from 'react-router-dom';
import { getNotice, deleteRegular } from '../../../../../api/csy/api'
import { Modal, Button } from 'antd';
interface DataType {
    key: string;
    year: string;
    startTime: string;
    endTime: string;
    name: string;
    contet: string;
    timer: string;
    array: string[];
    object: string
}




const App: React.FC = () => {
    const navigate = useNavigate()
    const btn = () => {
        navigate('/service/Operational/security/regularInspection/sendtable')
    }
    const [data, setData] = useState([])
    const [page, setPage] = useState(1)


    const getlist = () => {
        getNotice({ page }).then((res) => {
            setData(res.data.data)
        })
    }
    useEffect(() => {
        getlist()
    }, [])

    const columns: TableProps<DataType>['columns'] = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            render: (text, b, index) => <a>{index + 1}</a>,
        },
        {
            title: '年份',
            dataIndex: 'year',
            key: 'year',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '计划开始时间',
            dataIndex: 'startTime',
            key: 'startTime',
            render: (text) => {
                //变为时间格式
                return new Date(text).toLocaleDateString()
            }
        },
        {
            title: '计划结束时间',
            dataIndex: 'endTime',
            key: 'endTime',
            render: (text) => {
                //变为时间格式
                return new Date(text).toLocaleDateString()
            }
        },
        {
            title: '计划结束时间',
            dataIndex: 'endTime',
            key: 'endTime',
            render: (text) => {
                //变为时间格式
                return new Date(text).toLocaleDateString()
            }
        },
        {
            title: '任务下达人',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '检查结论',
            dataIndex: 'contet',
            key: 'contet',
        },

        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <button style={{ color: '#1890ff', border: 'none', background: 'none' }} onClick={() => showModal(record)}>查看</button>
                    {/* <button style={{ color: '#ffc365', border: 'none', background: 'none' }}>编辑</button> */}
                    <button style={{ color: '#f5222d', border: 'none', background: 'none' }} onClick={() => sc(record)}>删除</button>
                </Space>
            ),
        },
    ];
    const sc = (val: any) => {
        deleteRegular({ id: val._id }).then((res) => {
            if (res.data.code == 200) {
                message.success('删除成功')
                getlist()
            }
        })
    }

    const [isModalVisible, setIsModalVisible] = useState(false);
    const [currentRecord, setCurrentRecord] = useState<any>(null);

    const showModal = (record: any) => {
        console.log(record);

        setCurrentRecord(record);
        setIsModalVisible(true);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    // 页码变化时的处理函数
    const onChange = (page: number, pageSize: number) => {
        console.log(`当前页: ${page}, 每页条数: ${pageSize}`);
        setPage(page); // 更新当前页 
    };

    console.log(data);
    
    return (
        <>
            <div className='aa'>
                <button className='btn' onClick={btn}>发起</button>
            </div>

            <Table<DataType>

                columns={columns}
                dataSource={data}
                //分页 
                pagination={{
                    current: page, // 当前页
                    pageSize: 5, // 每页条目数
                    total: data.length, // 数据的总条目数 
                    onChange, // 页码变化时的回调  
                }}
            />;
            <Modal
                title="详细信息"
                open={isModalVisible}
                onCancel={handleCancel}
                footer={null}

            >
                {currentRecord && (
                    <div style={{ fontSize: '14px', lineHeight: '2' }}>
                        <p><strong>年份：</strong>{currentRecord.year}</p>
                        <p><strong>计划开始时间：</strong>{new Date(currentRecord.startTime).toLocaleString()}</p>
                        <p><strong>计划结束时间：</strong>{new Date(currentRecord.endTime).toLocaleString()}</p>
                        <p><strong>检查时间：</strong>{new Date(currentRecord.jianTime).toLocaleString()}</p>
                        <p><strong>创建时间：</strong>{new Date(currentRecord.timer).toLocaleString()}</p>
                        <p><strong>任务下达人：</strong>{currentRecord.name}</p>
                        <p><strong>检查对象：</strong>{currentRecord.object}</p>
                        <p><strong>检查结论：</strong>{currentRecord.contet}</p>
                        <p><strong>检查项：</strong>{currentRecord.array.join(', ')}</p>
                    </div>
                )}
            </Modal>
        </>
    )
}

export default App;